<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="changedialogVisible">
      <div slot="title" class="header-title">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="专家详情" name="first">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              label-width="110px"
            >
              <div class="formtitle">专家基本信息</div>
              <el-form-item label="专家姓名" prop="name" class="onecell">
                <el-input v-model="formInline.name" placeholder="专家姓名" :disabled="true" />
              </el-form-item>
              <el-form-item v-if="!isPersonal" label="专家编号" class="onecell">
                <el-input
                  v-model="formInline.serialNumber"
                  placeholder="H10-五位流水号，自动生成"
                  :disabled="true"
                />
              </el-form-item>
              <!-- <el-form-item label="专家编号" prop="guid" class="onecell">
                <el-input v-model="formInline.guid" placeholder="专家编号" :disabled="true"></el-input>
              </el-form-item>-->
              <el-form-item label="目前状态" prop="currentState" class="onecell">
                <el-select v-model="formInline.currentState" placeholder="请选择" :disabled="true">
                  <el-option label="在用" value="0" />
                  <el-option label="停用" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="性别" prop="sex" class="onecell">
                <el-radio-group v-model="formInline.sex" :disabled="true">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期" class="onecell">
                <el-date-picker
                  v-model="formInline.birthday"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item label="籍贯" class="onecell">
                <el-input v-model="formInline.nativePlace" placeholder="籍贯" :disabled="true" />
              </el-form-item>
              <el-form-item label="职务" class="onecell">
                <el-input v-model="formInline.duty" placeholder="职务" :disabled="true" />
              </el-form-item>
              <el-form-item label="最高学历" class="onecell">
                <el-select v-model="formInline.education" placeholder="请选择" :disabled="true">
                  <el-option label="大专" value="0" />
                  <el-option label="本科" value="1" />
                  <el-option label="硕士" value="2" />
                  <el-option label="博士" value="3" />
                  <el-option label="其他" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item label="毕业学校" class="onecell">
                <el-input v-model="formInline.school" placeholder="毕业学校" :disabled="true" />
              </el-form-item>
              <el-form-item label="专业" class="onecell">
                <el-input v-model="formInline.profession" placeholder="专业" :disabled="true" />
              </el-form-item>
              <el-form-item label="最高职称" class="onecell">
                <el-select
                  v-model="formInline.professionalTitle"
                  placeholder="请选择"
                  :disabled="true"
                >
                  <el-option label="中级" value="0" />
                  <el-option label="高级" value="1" />
                  <el-option label="正高级" value="2" />
                  <el-option label="无" value="3" />
                  <el-option label="其他" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="身份证号"
                prop="identityCard"
                class="onecell"
                v-show="formInline.source!=='1' || isCompanyExpertAdmin"
              >
                <el-input v-model="formInline.identityCard" placeholder="身份证号" :disabled="true" />
              </el-form-item>
              <el-form-item
                label="手机号码"
                prop="phonenumber"
                class="onecell"
                v-show="formInline.source!=='1' || isCompanyExpertAdmin"
              >
                <el-input
                  v-model.number="formInline.phonenumber"
                  placeholder="手机号码"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item
                label="电子邮箱"
                class="onecell"
                v-show="formInline.source!=='1' || isCompanyExpertAdmin"
              >
                <el-input v-model="formInline.email" placeholder="电子邮箱" :disabled="true" />
              </el-form-item>
              <el-form-item
                label="开户行"
                class="onecell"
                v-show="formInline.source!=='1' || isCompanyExpertAdmin"
              >
                <el-input v-model="formInline.bankName" placeholder="开户行" :disabled="true" />
              </el-form-item>
              <el-form-item
                label="银行卡号"
                prop="bankNo"
                class="onecell"
                v-show="formInline.source!=='1' || isCompanyExpertAdmin"
              >
                <el-input v-model.number="formInline.bankNo" placeholder="银行卡号" :disabled="true" />
              </el-form-item>
              <el-form-item label="专业类别" prop="professionCategorys" class="onecell">
                <el-select
                  v-model="formInline.professionCategorys"
                  placeholder="请选择"
                  filterable
                  multiple
                  :multiple-limit="5"
                  :disabled="true"
                >
                  <el-option
                    v-for="item in professionOption"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="其他联系号码" class="onecell" prop="otherContactNumber">
                <el-input
                  v-model="formInline.otherContactNumber"
                  placeholder="其他联系号码"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item label="是否同济大学在职人员" class="onecell" prop="tjuFlag">
                 <el-select v-model="formInline.tjuFlag" placeholder="请选择"  :disabled="true">
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>  
              </el-form-item>
              <el-form-item label="现所在单位" class="twocell">
                <el-input v-model="formInline.currentCompany" placeholder="现所在单位" :disabled="true" />
              </el-form-item>
              <el-form-item label="常用检索标签" class="">
                <el-input v-model="formInline.commonSearchTags" placeholder="专业类别中无法准确分类时输入，如果多个标签请用,隔开" :disabled="true" />
              </el-form-item>
              <el-form-item label="所在部门/院系" class="twocell" prop="tjuFaculty">
                <el-select v-model="formInline.tjuFaculty" placeholder="请选择" :disabled="true">
                  <el-option label="是" value="否" />
                  <el-option label="否" value="否" />
                  <el-option label="未知" value="未知" />
                </el-select>
              </el-form-item>
              <el-form-item
                label="联系地址"
                class="twocell"
                prop="address"
                v-show="formInline.source!=='1' || isCompanyExpertAdmin"
              >
                <el-input v-model="formInline.address" placeholder="联系地址" :disabled="true" />
              </el-form-item>
              <el-form-item class="twocell">
                <el-table
                  :data="formInline.bmsExpertCertifications"
                  border
                  style="width: 100%;margin-left:20px"
                >
                  <el-table-column label="专家持证情况" prop="type">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.type" placeholder="请选择" :disabled="true">
                        <el-option label="建设工程评标专家" value="0" />
                        <el-option label="政府采购专家" value="1" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否持证">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.flag" placeholder="请选择" :disabled="true">
                        <el-option label="是" value="0" />
                        <el-option label="否" value="1" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="专家证号">
                    <template slot-scope="scope">
                      <el-form-item :prop="'bmsExpertCertifications.'+scope.$index+'.number'">
                        <el-input v-model="scope.row.number" style="width:120px" :disabled="true" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="资深专家" prop="seniorExpertFlag">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.seniorExpertFlag"
                        placeholder="请选择"
                        :disabled="true"
                      >
                        <el-option label="是" value="0" />
                        <el-option label="否" value="1" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="专业" prop="expertProfession">
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'bmsExpertCertifications.'+scope.$index+'.expertProfession'"
                      >
                        <el-input
                          v-model="scope.row.expertProfession"
                          style="width:120px"
                          :disabled="true"
                        />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="所属地区" prop="area">
                    <template slot-scope="scope">
                      <el-form-item :prop="'bmsExpertCertifications.'+scope.$index+'.area'">
                        <el-select
                          v-model="scope.row.area"
                          placeholder="请选择"
                          style="width:120px;"
                          :disabled="true"
                        >
                          <el-option
                            v-for="item in areaOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column width="80" label="操作">
                    <template>
                      <a>删除</a>
                    </template>
                  </el-table-column>-->
                </el-table>
              </el-form-item>
              <el-form-item label="附件上传" class="twocell">
                <vue-uploader
                  :single-type="false"
                  v-if="dialogVisible"
                  :file-list="formInline.bmsAttachments"
                  :upload-readonly="true"
                />
                <!-- <el-input v-model="formInline.file" placeholder="附件上传"></el-input> -->
              </el-form-item>
              <div class="formtitle">专业特长、研究领域、经历与成就</div>
              <!--<el-form-item label="业务类别" class="twocell">
                <el-cascader
                  v-model="formInline.businessMerits"
                  :options="categoryOptions"
                  :show-all-levels="false"
                  :props="{multiple:true, value: 'id',emitPath:false }"
                  filterable
                  style="width:100%"
                  :disabled="true"
                />
              </el-form-item>-->
              <el-form-item label="业务特长" class="twocell">
                <el-input v-model="formInline.businessExpertise" placeholder="业务特长" :disabled="true" />
              </el-form-item>
              <!-- <el-form-item label="业务类别" class="twocell">
                <el-select v-model="formInline.serviceCategory" multiple placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>-->
              <el-form-item label="行业类别" class="twocell">
                <el-select v-model="formInline.industryMerits" multiple placeholder="请选择" :disabled="true">
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="语言特长" class="twocell">
                <!--<el-select v-model="formInline.languageMerit" multiple placeholder="请选择" :disabled="true">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>-->
                <el-input v-model="formInline.languageMerit" placeholder="语言特长" :disabled="true" />
              </el-form-item>
              <el-form-item label="经历与成就" class="twocell">
                <el-input
                  v-model="formInline.introduction"
                  placeholder="经历与成就"
                  type="textarea"
                  :rows="2"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item label="特长备注" class="twocell">
                <el-input
                  v-model="formInline.meritRemark"
                  placeholder="特长备注"
                  type="textarea"
                  :rows="2"
                  :disabled="true"
                />
              </el-form-item>
              <el-form-item label="专家费用(元)" class="twocell">
                <el-input v-model="formInline.useAmount" placeholder="专家费用" :disabled="true" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="使用情况" name="second">
            <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
              <el-form-item label="专家姓名">
                <el-input v-model="expertNanme" style="width: 150px" size="small" :disabled="true" />
              </el-form-item>
              <el-form-item label="专业">
                <el-input v-model="profession" style="width: 150px" size="small" :disabled="true" />
              </el-form-item>
              <el-form-item label="项目名称">
                <el-input
                  v-model="queryParams.projectName"
                  placeholder="请输入项目名称"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="日期">
                <el-date-picker
                  v-model="dateRange"
                  size="small"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport"
                >导出报表</el-button>
              </el-col>
            </el-row>
            <div class="tablebox">
              <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
                <el-table-column label="项目名称" prop="projectName" width="160" />
                <el-table-column label="项目代码" prop="projectCode" width="100" />
                <el-table-column label="项目进展" prop="projectStatus" width="100">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.projectStatus === '0' ? 'danger' : 'success'"
                      disable-transitions
                    >{{ scope.row.projectStatusText }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="咨询内容" prop="consultingContent" width="150" />
                <el-table-column label="咨询时间" prop="useDate" width="120">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.useDate, '{y}-{m}-{d} ') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="使用评价" prop="opinion" :show-overflow-tooltip="true" />
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changedialogVisible">取 消</el-button>
        <el-button type="primary" @click="changedialogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  expertUseList,
  exportExpertUse
} from '@/api/projectleader/expertGlance';
import { professionCategory } from '@/api/expert/professionCategory';
import { treeselect } from '@/api/system/business_category';
import { provinceCityTree } from '@/api/provinceCity';
import vueUploader from '@/components/Uploader';
export default {
  name: 'TabExpertModal',
  components: { vueUploader },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    expertInfo: {
      type: Object,
      default: () => ({})
    },
    isPersonal: {
      type: Boolean,
      default: false
    },
    isCompanyExpertAdmin: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      total: 0,
      expertNanme: '',
      profession: '',
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectNanme: undefined,
        expertId: undefined
      },
      rowSpanArr: [],
      position: 0,
      tableData: [],
      activeName: 'first',
      categoryOptions: [],
      areaOptions: [],
      industryOptions: [],
      formInline: {
        name: '',
        serialNumber: '',
        // guid: '',
        currentState: '',
        sex: '',
        birthday: '',
        nativePlace: '',
        duty: '',
        education: '',
        school: '',
        profession: '',
        professionalTitle: '',
        identityCard: '',
        phonenumber: '',
        email: '',
        bankName: '',
        bankNo: '',
        professionCategorys: '',
        otherContactNumber: '',
        currentCompany: '',
        tjuFaculty: '',
        file: '',
        businessMerits: [],
        // serviceCategory: [],
        industryMerits: [],
        languageMerit: '',
        introduction: '',
        meritRemark: '',
        useAmount: '',
        bmsExpertCertifications: [],

      },
      professionOption: [],
      dateRange: []
    }
  },

  mounted () {
    console.log(this.expertInfo, 'expertInfo')
    this.expertNanme = this.expertInfo.name
    this.profession = this.expertInfo.profession
    this.formInline = this.expertInfo
    this.queryParams.expertId = this.expertInfo.guid
    this.getList()
  },
  created () {
    // this.getInfo()
    this.professionList()

    treeselect().then(res => {
      if (res.code === 200) {
        this.categoryOptions = res.data
      }
    })
    provinceCityTree({ type: '1' }).then(res => {
      if (res.code === 200) {
        this.areaOptions = res.data
      }
    })
    //行业类别
    this.getDicts("sys_industry_type").then(response => {
      console.log(response,'response')
      this.industryOptions = response.data;
    });
  },
  methods: {
    getList () {
      // 专家使用情况列表
      expertUseList(this.addDateRange(this.queryParams, this.dateRange)).then(
        res => {
          if (res.code === 200) {
            this.tableData = res.rows.map(item => {
              switch (item.projectStatus) {
                case '0':
                  item.projectStatusText = '筹备';
                  break
                case '1':
                  item.projectStatusText = '进行中';
                  break
                case '2':
                  item.projectStatusText = '成果交付';
                  break
                case '3':
                  item.projectStatusText = '项目完成';
                  break
                case '4':
                  item.projectStatusText = '项目暂停';
                  break
                case '5':
                  item.projectStatusText = '项目终止';
                  break
                case '6':
                  item.projectStatusText = '项目作废';
                  break
              }
              return item
            })
            this.total = res.total
            this.getRowSpan()
          }
        }
      )
    },
    handleQuery () {
      this.getList()
    },
    resetQuery () {
      this.queryParams.pageNum = 1
      this.queryParams.projectName = undefined
      this.dateRange = []
      this.getList()
    },
    // 专家个人详情
    // getInfo () {
    //   personalExpertInfo(this.expertInfo.guid).then(res => {
    //     if (res.code === 200) {

    //     }
    //   })
    // },
    // 专业类别选择 begin
    professionList () {
      professionCategory().then(res => {
        if (res.code === 200) {
          this.professionOption = res.data
        }
      })
    },
    // end
    // 专家使用情况导出
    handleExport () {
      exportExpertUse(this.queryParams).then(res => {
        if (res.code === 200) {
          this.download(res.msg)
        }
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    changedialogVisible () {
      this.$emit('changetabdialogVisible', false)
    },
    getRowSpan () {
      this.rowSpanArr = []
      this.tableData.forEach((item, index) => {
        if (index == 0) {
          this.rowSpanArr.push(1)
          this.position = 0
        } else {
          if (
            this.tableData[index].projectId ==
            this.tableData[index - 1].projectId
          ) {
            this.rowSpanArr[this.position] += 1 //项目名称相同，合并到同一个数组中
            this.rowSpanArr.push(0)
            this.tableData[index].projectName = this.tableData[
              index - 1
            ].projectName
            this.tableData[index].projectCode = this.tableData[
              index - 1
            ].projectCode
            this.tableData[index].projectStatus = this.tableData[
              index - 1
            ].projectStatus
          } else {
            this.rowSpanArr.push(1)
            this.position = index
          }
        }
      })
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const _row = this.rowSpanArr[rowIndex]
        return {
          rowspan: _row, // 行
          colspan: 1 // 列
        }
      }
    },
    // tableSortChange (column) {
    //   this.queryParams.pageNum = 1;
    //   if (column.order === "descending") {
    //     this.queryParams.sortBy = column.prop;
    //     this.queryParams.order = "desc";
    //   } else {
    //     this.queryParams.sortBy = column.prop;
    //     this.queryParams.order = "asc";
    //   }
    //   this.getList();
    // }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog {
  width: 1200px;
  .formtitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #d9e5f1;
    margin-bottom: 10px;
  }
  .onecell {
    width: calc(50% - 20px);
  }
  .twocell {
    width: calc(100% - 20px);
  }
  .threecell {
    width: 100%;
  }
  .el-form-item--medium .el-form-item__content {
    width: calc(100% - 110px);
    .el-select {
      width: 100%;
    }
  }
}
.input-wrap {
  padding: 8px;
  display: flex;
  width: 50%;
  .input-label {
    min-width: 1em;
    max-width: 6em;
    color: rgba(0, 0, 0, 0.65);
    margin-right: 8px;
    display: flex;
    align-items: center;
    flex: 0 0 90px;
  }

  .input-content {
    -webkit-box-flex: 1;
    flex-grow: 1;
  }
}

.tablebox {
  margin-top: 20px;
  height: 100%;
}

/deep/.el-dialog__body {
  padding: 0 20px;
}
/deep/.el-form--inline .el-form-item {
  text-align: left;
}

/deep/.pagination-container .el-pagination {
  bottom: 0;
}

/deep/.el-input.is-disabled {
  .el-input__prefix {
    display: none;
  }
  .el-input__suffix {
    display: none;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}
</style>
